<template>
  <div class="blogTag-box flex-row">
    <div id="blogTag" class="blogTag-left flex-row">
      <div  v-for="item in blogTags" :key="item.id" :style="item.isSelect ? {background: item.blogTagColor} : null"
            :class="item.isSelect ? 'blogTag mr10 mb10 cp active': 'blogTag mr10 mb10 cp'"
            @click="changeBlogTag(item.id)">{{item.blogTagName}}</div>
    </div>

    <div class="blogTag-right" v-if="isShowBlogTagRight">
      <i v-if="!isOpenBlogType" class="el-icon-arrow-down cp" @click="openBlogType"></i>
      <i v-else class="el-icon-arrow-up cp" @click="openBlogType"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogTag',
  props: {
    blogTags: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      isOpenBlogType: false,
      isShowBlogTagRight: false
    }
  },
  mounted() {
    const blogTagD = document.getElementById('blogTag')
    if (blogTagD.scrollHeight > blogTagD.clientHeight) {
      blogTagD.style.overflowY = 'hidden'
      this.isShowBlogTagRight = true
    }
  },
  methods: {
    openBlogType() {
      this.isOpenBlogType = !this.isOpenBlogType
      const blogTagD = document.getElementById('blogTag')
      const blogBoxD = document.getElementById('blogBox')
      if (!this.isOpenBlogType) {
        blogTagD.style.overflowY = 'hidden'
        blogBoxD.style.marginTop = '8px'
        return
      }
      blogBoxD.style.marginTop = (blogTagD.scrollHeight - 84) + 'px'
      blogTagD.style.overflowY = 'visible'
    },
    changeBlogTag(id) {
      this.$emit('changeBlogTag', id)
    }
  }
}
</script>

<style scoped lang="less">
.blogTag-box {
  color: #849aa4;
  .blogTag-left {
    padding: 20px 50px;
    height: 50px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 94%;
    .blogTag {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      background: #f2f5f8;
      padding: 0 14px;
      color: #849aa4;
      &.active{
        color: #fff;
        background: #3593f2;
      }
    }
  }
  .blogTag-right {
    height: 50px;
    margin-top: 20px;
    i {
      width: 30px;
      height: 30px;
      background: #f2f5f8;
      font-size: 30px;
      &:hover {
        color: #3593f2;
      }
    }
  }
}
</style>